<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Estado de TableSpace</title>
        <link rel="shortcut icon" href="../Data/images/Saved-Data-Utility.ico" type="image/x-icon"/>
    </h:head>
    <h:body>
        <p:growl id="msgCTSPP" showDetail="true" life="10000"/>
        <p:panel>
    
            <h:form prependId="false">
                <h:panelGrid style="margin: 0 auto">
                    <p:outputLabel value="ESTADO DE TABLESPACES" style="color: #2480BC;"/>
                </h:panelGrid>
                
                <p:separator/>

                <p:barChart id="chart" widgetVar="chart" value="#{reviewTableSpaceStateBean.categoryModel}" 
                            legendPosition="ne" style="height:300px"  
                            title="Estado de Tablespace" stacked="true" 
                            barMargin="10" min="0" max="110"  animate="true"
                            zoom="true"
                            />  
                
                <br/>
                
                <p:outputLabel value="*** Si no se muestra ningun dato en su gráfico,
                               significa que el TableSpace correspondiente esta OFFLINE"/>
                
                <br/>
                <br/>
                
                <h:panelGrid style="margin: 0 auto" columns="1">
                    <p:commandButton type="button" value="Exportar" icon="ui-icon-extlink" onclick="exportChart()"/>  
                </h:panelGrid>
                
            
                <p:dialog widgetVar="dlg" showEffect="fade" header="TableSpaces">  
                        <p:outputPanel id="output" style="width:1160px;height:310px" />  
                    </p:dialog>  
                
                    <script>
                            function exportChart() {  
                                $('#output').empty().append(PF('chart').exportAsImage());  
                                PF('dlg').show();  
                            }
                    </script>
                
                <br/>
                <p:separator/>
                <br/>                                           
                
                <p:dataTable id="dataTableTS" var="tableSpaceInfo" value="#{reviewTableSpaceStateBean.mediumTableSpaceInfoModel}" 
                                 paginator="true" rows="15"
                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" 
                                 rowsPerPageTemplate="5,10,15"
                                 selection="#{reviewTableSpaceStateBean.selectedTableSpaceInfo}"
                                 selectionMode="single">
                    
                        <f:facet name="header"> 
                            TableSpaces
                        </f:facet>

                        <p:column headerText="Tablespace">  
                            <h:outputText value="#{tableSpaceInfo.nombre}" />  
                        </p:column>  
                    
                        <p:column headerText="Porcentaje Espacio Usado">  
                            <h:outputText value="#{tableSpaceInfo.espacioUsado} "/>  
                        </p:column>  
                    
                        <p:column headerText="Portentaje Espacio Libre">  
                            <h:outputText value="#{tableSpaceInfo.espacioLibre}"/>  
                        </p:column>  
                    
                        <p:column headerText="Total Mb">  
                            <h:outputText value="#{tableSpaceInfo.totalMb}"/>  
                        </p:column>
                    
                        <p:column headerText="Mb Usados">  
                            <h:outputText value="#{tableSpaceInfo.usageMb}"/>  
                        </p:column>
                    
                        <p:column headerText="Mb Libres">  
                            <h:outputText value="#{tableSpaceInfo.freeMb}"/>  
                        </p:column>
                        
                    </p:dataTable>
            </h:form>

        </p:panel>
    </h:body>
</html>
